<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/myComic.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
	</head>

	<body>

		<style>
				.mui-control-content {
				background-color: white;
				min-height: 558px;
				.mui-control-content .mui-loading {
					margin-top: 50px;
				}
		</style>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的漫画</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						最近观看
					</a>
					<a class="mui-control-item" href="#item2mobile">
						我的关注
					</a>
					<a class="mui-control-item" href="#item3mobile">
						我的评论
					</a>

				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul id="history" class="mui-table-view">

								</ul>
							</div>
						</div>
					</div>

					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
								<ul id="comment" class="mui-table-view">

										</ul>
							</div>
						</div>

					</div>

					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
								<ul id="comment" class="mui-table-view">

										</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/url.js"></script>
		<script src="js/mui.min.js"></script>
		<script>
			/*
									如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
									* */
			$.noConflict();
			
			jQuery.ajax({
				type: 'post',
				url: serverip.ip + '/mycomicstest',
				async:false,
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
				success: function(data) {
					if(data != 1) {
							
							mui.openWindow({
								url: 'login.html'
							})
						
					} 
					
				}
			});



			/*最近观看*/
			jQuery.ajax({
				type: 'post',
				url: serverip.ip + '/mycomics/historyWatch',
				dataType: 'json',
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
				success: function(data) {
					var ul = document.getElementById('history');
					ul.innerHTML=null;
					for(var i = 0; i < data.length; i++) {
						var li = document.createElement('li');
						li.classList.add('mui-table-view-cell');
						li.innerHTML = '<div class="picture1">' +
							'<div class="icon1">' +
							'<img src="'+serverip.ip2 +data[i].cid +'/'+data[i].comics.icon + '" style="width:100%;height:100%"/>' +
							'</div>' +
							'<div class="info1">' +
							'<div class="comicName1">' + data[i].comics.comicsname + '</div>' +
							'<div class="author1">kroeaComics</div>' +
							'<div class="time1">' + data[i].createTime + '</div>' +
							'</div>' +
							'<div class="setsq1">' +
							'<div class="sets1">#' + data[i].chapterName + '</div>' +
							'</div>' +
							'<div class="chapterID" style="display:none;">' + data[i].c_pid + '</div>'+
							'<div class="comicsID" style="display:none;">' + data[i].cid + '</div>'+
							'</div>';

						ul.appendChild(li);
					}
					jQuery('.picture1').bind('tap', function() {
						var chapterid = jQuery(this).find('.chapterID:first').text();
						var comicsid = jQuery(this).find('.comicsID:first').text();
						var comicsName=jQuery(this).find('.comicName1:first').text();
						var chapterName=jQuery(this).find('.sets1:first').text();
						mui.openWindow({
							url: 'watchComics.html',
							extras: {
								'chapterid': chapterid,
								'comicsid':comicsid,
								'chapterName':chapterName,
								'comicsName':comicsName
							}
						})
					});

				}
			});
		</script>

		
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				
				
                var item2=document.getElementById('item2mobile');
                var item3=document.getElementById('item3mobile');
				document.getElementById('slider').addEventListener('slide', function(e) {
					if(e.detail.slideNumber === 1) {
						if(item2.querySelector('.mui-scroll')) {
							setTimeout(function() {
								/*我的关注滑动*/
								jQuery.ajax({
									type: 'post',
									url: serverip.ip + '/mycomics/attention',
									dataType: 'json',
									xhrFields: {
										withCredentials: true
									},
									crossDomain: true,
									success: function(data) {
										var ul = document.getElementById('attention');
										ul.innerHTML=null;
										for(var i = 0; i < data.length; i++) {
											var li = document.createElement('li');
											li.classList.add('mui-table-view-cell');
											li.innerHTML = '<div class="picture2">' +
												'<div class="icon2">' +
												'<img src="'+serverip.ip2 +data[i].cid +'/'+data[i].comics.icon + '" style="width:100%;height:100%"/>' +
												'</div>' +
												'<div class="info2">' +
												'<div class="comicName2">' + data[i].comics.comicsname + '</div>' +
												'<div class="author2">kroeaComics</div>' +
												'<div class="time2">' + data[i].create_Time + '</div>' +
												'</div>' +
												'<div class="setsq2">' +
												'<div class="sets2">' +
												'<span class="mui-icon-extra mui-icon-extra-notice"></span>' +
												'</div>' +
												'</div>' +
												'<div class="comicsID" style="display:none;">' + data[i].cid + '</div>' +
												'</div>';

											ul.appendChild(li);
										}

										jQuery('.picture2').bind('tap', function() {
											var id = jQuery(this).find('.comicsID:first').text();
											mui.openWindow({
												url: 'commandComics.html',
												extras: {
													comicsid: id
												}
											})
										});
									}
								});

							}, 500);

						}
					} else if(e.detail.slideNumber === 2) {
						if(item3.querySelector('.mui-scroll')) {
							setTimeout(function() {
								//item3.querySelector('.mui-scroll').innerHTML = html3;
								/*我的评论滑动*/
								jQuery.ajax({
									type: "post",
									url: serverip.ip + '/mycomics/comment',
									
									success: function() {
										var ul = document.getElementById('comment');
										ul.innerHTML=null;
										for(var i = 0; i < data.length; i++) {
											var li = document.createElement('li');
											li.classList.add('mui-table-view-cell');
											li.innerHTML = '<div class="picture3">' +
												'<div class="mo">' +
												'<div class="info3">' +
												'<div class="comicName3">' + data[i].comicsName & nbsp & nbsp & nbspdata[i].chapterName + '</div>' +
												'<div class="content">' + data[i].commentContent + '</div>' +
												'<div class="time3">' + data[i].commentTime + '</div>' +
												'</div></div></div>' +
												'<div class="chapterID" style="display:none;">' + data[i].cid + '</div>' +
												'<div class="chapterName" style="display:none;">' + data[i].chapterName + '</div>' +
												'<div class="comicsName" style="display:none;">' + data[i].comicsName + '</div>' +
												'</div>';

											ul.appendChild(li);
										}

										jQuery('.picture3').bind('tap', function() {
											var chapterid = jQuery(this).find('.chapterID:first').text();
											var comicsName = jQuery(this).find('.comicsName:first').text();
											var chapterName = jQuery(this).find('.chapterName:first').text();
											mui.openWindow({
												url: 'I-comment.html',
												extras: {
													'chapterid': chapterid,
													'comicsName':comicsName,
													'chapterName':chapterName
												}
											})
										});

									}
								});

							}, 500);
						}
					}
				});

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
		</script>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item  update" href="tab-webview-subpage-about.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label ">更新</span>
			</a>
			<a class="mui-tab-item discover" href="tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-personadd"></span>
				<span class="mui-tab-label ">发现</span>
			</a>
			<a id="defaultTab" class="mui-tab-item mui-active mycomics" href="tab-webview-subpage-contact.html">
				<span class="mui-icon mui-icon-star-filled"></span>
				<span class="mui-tab-label ">我的漫画</span>
			</a>
			<a class="mui-tab-item my" href="tab-webview-subpage-setting.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label ">MY</span>
			</a>
		</nav>

		<script>
			document.getElementsByClassName("update")[0].addEventListener("tap", function() {
				mui.openWindow({
					url: "homePage.html"
				})
			});

			document.getElementsByClassName("discover")[0].addEventListener("tap", function() {
				mui.openWindow({
					url: "discover.html"
				})
			});

			document.getElementsByClassName("mycomics")[0].addEventListener("tap", function() {
				mui.openWindow({
					url: "myComics.html"
				})
			});

			document.getElementsByClassName("my")[0].addEventListener("tap", function() {
				mui.openWindow({
					url: "personalCenter.html"
				})
			});
		</script>

	</body>

</html>
